<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { switchTab } from '@uni-helper/uni-promises'
import user from '@/composables/user'
import { aliPayRegister, findUserInfo, ocrOss } from '@/api/user'
import type { FindUserDto } from '@/api/user/type'
import { toast } from '@/utils/utils'

const userInfo = ref<FindUserDto>({} as FindUserDto)

async function getUserInfo() {
    const res = await findUserInfo()
    userInfo.value = res
}

function toCamera(type: string) {
    uni.navigateTo({
        url: `/package-mine/pages/camera/camera?bgType=${type}`,
        events: {
            base64: async (data: {
                base64: string
            }) => {
                if (!data.base64)
                    return
                const res = await ocrOss({
                    idCard: data.base64,
                })
                if (type === 'front') {
                    if (!userInfo.value.userName || !userInfo.value.idCardNo || res.idCardInfo.name === userInfo.value.userName || res.idCardInfo.code === userInfo.value.idCardNo) {
                        userInfo.value.userName = res.idCardInfo.name
                        userInfo.value.idCardNo = res.idCardInfo.code
                        userInfo.value.ownIdCardFront = res.url
                    }
                    if (res.idCardInfo.name !== userInfo.value.userName && res.idCardInfo.code !== userInfo.value.idCardNo)
                        toast('身份证照片和当前身份信息不符')
                }
                else if (type === 'back') {
                    userInfo.value.ownIdCardBack = res.url
                }
            },
        },
    })
}

async function onSubmit() {
    const res = await aliPayRegister(userInfo.value)
    if (res === 'needPhoto') {
        toast('身份证照片和当前身份信息不符')
        return
    }
    toast('提交身份信息成功')
    await user.login()
    await wait(1000)
    switchTab({
        url: '/pages/index/index',
    })
}

onMounted(async () => {
    await user.waitLogin()
    await getUserInfo()
})
</script>

<template>
    <NavbarContainer nav-title="身份证照">
        <view class="container">
            <view class="head">
                请确保身份证照片为本人的身份证
            </view>
            <view class="body topbac">
                <view class="title">
                    身份证信息
                </view>
                <view class="row row-box">
                    <view class="row-general">
                        姓名
                    </view>
                    <view class="row-general">
                        {{ userInfo.userName }}
                    </view>
                </view>
                <view class="row row-box">
                    <view class="row-general">
                        身份证号
                    </view>
                    <view class="row-general">
                        {{ userInfo.idCardNo }}
                    </view>
                </view>
            </view>

            <view class="body">
                <view class="title">
                    身份证信息
                </view>
                <view class="row">
                    <img class="card" :src="userInfo.ownIdCardFront || '../../../static/images/opinion/fanmian.png'"
                         alt="" @click="toCamera('front')">
                    <img class="card" :src="userInfo.ownIdCardBack || '../../../static/images//opinion/zhengmian.png'"
                         alt="" @click="toCamera('back')">
                </view>
                <view class="title" style="margin-top: 40rpx;">
                    拍摄要求
                </view>
                <view class="demolist" style="margin-top: 40rpx;">
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images//idCard/idcard1.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #00D679;">√</text>标准拍摄</view>
                    </view>
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images/idCard/idcard2.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #FF7642;">×</text>边框缺失</view>
                    </view>
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images/idCard/idcard3.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #FF7642;">×</text>照片模糊</view>
                    </view>
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images/idCard/idcard4.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #FF7642;">×</text>闪光强烈</view>
                    </view>
                </view>
            </view>
            <button class="long-btn" @click="onSubmit">提交</button>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.long-btn {
    width: 670rpx;
    height: 94rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff7642;
    border-radius: 47px;
    font-size: 36rpx;
    color: white;
    margin-top: 60rpx;
    font-weight: 400;
    box-shadow: unset !important;
}

.row-box {
    padding-top: 30rpx;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    background: #FAFAFC;
    height: 100vh;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.head {
    font-size: 36rpx;
    color: #202536;
    padding: 60rpx 0;
    font-weight: bold;
}

.body {
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background: #ffffff;
    margin-bottom: 30rpx;
}

.title {
    color: #151718;
    font-size: 32rpx;
    font-weight: 600;
}

.row-box {
    padding-top: 30rpx;
}

.row-general {
    color: #565868;
    font-size: 28rpx;
}

.card {
    width: 296rpx;
    height: 190rpx;
    margin-top: 32rpx;
    border-radius: 12rpx;
}

.demolist {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.demolist .item {
    width: 22%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.demolist .item .top {
    width: 100%;
    height: 100rpx;
}

.topbac {
    background: linear-gradient(109deg, #D5F4FF -4%, #F9EEF1 49%, #D5F4FF 100%);
}

.iddemoimg {
    width: 100%;
    height: 100%;
}

.demolist .item .bottom {
    margin-top: 20rpx;
    color: #565868;
    font-size: 24rpx;
}
</style>

<route lang="json">
{
    "stytle": {
        "navigationBarTitleText": "身份证上传"
    }
}
</route>
